<template>
  <div>
    <!-- 页面面包屑 -->
    <a-breadcrumb>
      <a-breadcrumb-item>文章管理</a-breadcrumb-item>
      <a-breadcrumb-item>文章列表</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 表格操作区 -->
    <div class="table-op">
      <div>
        <a-button type="primary" size="small" @click="router.push({ name: 'BackendBlogCreate' })">
          <template #icon>
            <icon-plus />
          </template>
          创建
        </a-button>
      </div>
      <div style="margin-left: auto">
        <a-input-search
          v-model="queryReq.keywords"
          @search="BlogList"
          @keyup.enter="BlogList"
          :style="{ width: '360px' }"
          placeholder="请输入文章内容关键字,按回车键进行搜索"
          search-button
        />
      </div>
    </div>
    <!-- 表格数据 -->
    <div>
      <a-table :data="data.items" :loading="queryLoading" column-resizable>
        <template #columns>
          <a-table-column title="编号" data-index="id" :width="80"></a-table-column>
          <a-table-column title="标题" data-index="title" :width="160"></a-table-column>
          <a-table-column title="作者" data-index="author" :width="120"></a-table-column>
          <!-- 控制了这一列的宽带, 如果内容超过了宽带，开启省略模式ellipsis, 给提示开启tooltip -->
          <a-table-column title="概要" ellipsis tooltip :width="380">
            <!-- 自定义渲染 -->
            <template #cell="{ record }">
              {{ record.content.slice(0, 200) }}
            </template>
          </a-table-column>
          <a-table-column title="状态" data-index="status" :width="120"></a-table-column>
          <a-table-column title="创建时间" :width="180">
            <!-- 自定义渲染 -->
            <template #cell="{ record }">
              <!-- 后端返回是单位为秒的时间戳, 因此需要 * 1000 转换为毫米 -->
              {{ new Date(record.created_at * 1000).toLocaleString() }}
            </template>
          </a-table-column>
          <a-table-column align="center" title="操作" :width="200">
            <template #cell="{ record }">
              <a-space>
                <!-- 携带文章的Id跳转到文章创建页面, 创建页面根据文章id 拉取数据 -->
                <a-button
                  @click="router.push({ name: 'BackendBlogCreate', query: { id: record.id } })"
                  >修改</a-button
                >
                <a-button @click="$modal.info({ title: 'Name', content: record.name })"
                  >发布</a-button
                >
                <a-button
                  status="warning"
                  :loading="deleteLoading === record.id"
                  @click="deleteClick(record)"
                >
                  删除
                  <!-- 确认弹窗， visible -->
                  <a-modal v-model:visible="visible" @ok="deleteHandler">
                    <template #title> 删除文章 </template>
                    <div>
                      是否真的删除该文章{{ choiceDeleteBlog.title }}
                    </div>
                  </a-modal>
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { BLOG_LIST, BLOG_DELETE } from '@/api/blog'
import { Message } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'

// {
//             "id": 22,
//             "created_at": 1684566571,
//             "updated_at": 1684566571,
//             "pulished_at": 0,
//             "title": "test",
//             "author": "test",
//             "content": "test",
//             "tags": {},
//             "status": "草稿"
//         },
var data = reactive({
  items: [],
  total: 0
})

// 绑定到用户界面
var queryReq = reactive({
  keywords: ''
})




// 调用后端API查询博客列表数据
const BlogList = async () => {
  // 让UI显示为数据加载中
  queryLoading.value = true
  try {
    let resp = await BLOG_LIST(queryReq)
    data.items = resp.items
    data.total = resp.total
  } catch (error) {
    Message.error(`获取博客列表失败: ${error}`)
  } finally {
    // 数据加载结束
    queryLoading.value = false
  }
}

// 查询后端的Loading状态，是否处于数据加载中
const queryLoading = ref(false)
// 这里需要处理 单个按钮的状态, 通过id比对，来确认那个按钮处于Loading
const deleteLoading = ref(0)
// 控制弹窗是否显示
const visible = ref(false)

// 删除功能, 控制弹窗打开, 传递需要删除的数据
let choiceDeleteBlog = {}
const deleteClick = (record) => {
  visible.value = true
  choiceDeleteBlog = record
}

const router = useRouter()

// 获取数据过后需要模板你已经加载完成 才能更新
onMounted(() => {
  // 执行很多界面渲染后的逻辑
  BlogList()
  // ...
})

// 使用之前选中的Blog
const deleteHandler = async () => {
  deleteLoading.value = choiceDeleteBlog.id
  try {
    const resp = await BLOG_DELETE(choiceDeleteBlog.id)
    console.log(resp)
    // 删除成功后，页面数据需要更新
    BlogList()
  } catch (error) {
    Message.error(`删除失败: ${error}`)
  }
}
</script>

<style lang="css" scoped>
.table-op {
  margin-bottom: 8px;
  margin-top: 6px;
  display: flex;
  align-items: center;
}
</style>
